<template>
  <a-modal v-model="visible" width="1181px">
    <template slot="footer">
      <a-button
        style="background: #d7d7d7; color: #fff; border: none"
        @click="visible = false"
        >关闭</a-button
      >
      <a-button
        type="primary"
        :loading="loading"
        style="margin-left: 20px"
        @click="getPdfs"
        >下载为PDF</a-button
      >
    </template>
    <template slot="title">
      <span>外箱标预览</span>
      <a-button
        type="primary"
        :loading="loading"
        style="margin-left: 20px"
        @click="getPdfs"
        >下载为PDF</a-button
      >
    </template>
    <a-spin tip="Loading..." :spinning="spinning">
      <div id="pdfDom">
        <div
          style="
            width: 1181px;
            height: 1670px;
            font-family: 'Noto Sans SC';
            padding: 5px 0;
          "
          v-for="(item, i) in tagArry"
          :key="i"
        >
          <div
            style="
              height: 135px;
              display: flex;
              justify-content: space-between;
              padding: 0 20px;
              align-items: center;
            "
          >
            <div style="font-size: 55px; color: #010101; font-weight: bold">
              {{ item.warehousingId }}
            </div>
            <div style="color: #000000">
              <span style="font-size: 50px"> client: </span>
              <b style="font-size: 55px">{{ item.tenantId }}</b>
            </div>
          </div>
          <div
            style="
              height: 94px;
              background-color: #333333;
              display: flex;
              justify-content: space-between;
              padding: 0 19px;
              align-items: center;
              color: #fff;
            "
          >
            <div style="font-size: 45px">{{ item.printingDate }}</div>
            <div style="font-size: 55px">
              packages {{ item.currentBox }} of {{ item.packingNumber }}
            </div>
          </div>
          <div
            style="
              height: 429px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div
              style="
                width: 715px;
                height: 429px;
                border-bottom: solid 5px #7b7b7b;
                border-right: solid 5px #7b7b7b;
              "
            >
              <div
                style="
                  height: 192px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-top: 57px;
                  margin-right: 29px;
                  margin-left: 20px;
                "
              >
                <div
                  style="
                    font-size: 38px;
                    color: #010101;
                    font-weight: 500;
                    letter-spacing: 3px;
                  "
                >
                  Order ID:{{ item.applyCode }}
                </div>
                <div
                  style="
                    border: solid 4px #7b7b7b;
                    width: 204.71px;
                    height: 191.76px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <span
                    style="font-size: 125px; font-weight: 500; color: #000000"
                    >{{ item.type }}</span
                  >
                </div>
              </div>
              <div
                style="
                  font-size: 38px;
                  color: #010101;
                  font-weight: 500;
                  letter-spacing: 3px;
                  margin-left: 20px;
                "
              >
                {{ item.lengthNumber }}*{{ item.wideNumber }}*{{
                  item.highNumber
                }}CM,{{ item.caratNumber }}KG
              </div>
            </div>
            <div
              style="
                width: 466px;
                height: 429px;
                border-bottom: solid 5px #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div style="width: 400px; height: 400px">
                <vue-qr
                  :size="400"
                  :margin="0"
                  :auto-color="true"
                  :dot-scale="1"
                  :text="item.code"
                />
              </div>
            </div>
          </div>
          <table
            v-if="item.type === 'S' || item.type === 'S+'"
            border="0"
            style="
              width: 1145px;
              margin: 0 18px;
              margin-top: 20px;
              margin-bottom: 20px;
              text-align: center;
              border-collapse: collapse;
            "
          >
            <thead>
              <tr
                style="
                  height: 72px;
                  font-size: 42px;
                  color: #010101;
                  font-weight: 500;
                "
              >
                <td
                  style="
                    width: 390px;
                    border: 4px solid #7b7b7b;
                    border-right: none;
                    border-bottom: none;
                  "
                >
                  SKU
                </td>
                <td
                  style="
                    width: 261px;
                    border: 4px solid #7b7b7b;
                    border-right: none;
                    border-bottom: none;
                  "
                >
                  Item Name
                </td>
                <td
                  style="
                    width: 250px;
                    border: 4px solid #7b7b7b;
                    border-right: none;
                    border-bottom: none;
                  "
                >
                  SKU数量/箱
                </td>
                <td
                  style="
                    width: 228px;
                    border: 4px solid #7b7b7b;
                    border-bottom: none;
                  "
                >
                  总箱数
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style="height: 135px; font-size: 40px; color: #010101">
                <td style="border: 4px solid #7b7b7b; border-right: none">
                  {{ item.sku }}
                </td>
                <td style="border: 4px solid #7b7b7b; border-right: none">
                  {{ item.skuName }}
                </td>
                <td
                  style="
                    border: 4px solid #7b7b7b;
                    font-weight: bold;
                    font-size: 60px;
                    border-right: none;
                  "
                >
                  {{ item.skuNum }}
                </td>
                <td
                  style="
                    border: 4px solid #7b7b7b;
                    font-weight: bold;
                    font-size: 60px;
                  "
                >
                  {{ item.skuPackingNumber }}
                </td>
              </tr>
            </tbody>
          </table>

          <table
            v-if="item.type === 'M'"
            border="0"
            style="
              width: 1145px;
              margin: 0 18px;
              margin-top: 20px;
              margin-bottom: 20px;
              text-align: center;
              border-collapse: collapse;
            "
          >
            <thead>
              <tr
                style="
                  height: 72px;
                  font-size: 42px;
                  color: #010101;
                  font-weight: 500;
                "
              >
                <td
                  style="
                    width: 261px;
                    border: 4px solid #7b7b7b;
                    border-right: none;
                    border-bottom: none;
                  "
                >
                  SKU数量/箱数
                </td>
                <td
                  style="
                    width: 250px;
                    border: 4px solid #7b7b7b;
                    border-right: none;
                    border-bottom: none;
                  "
                >
                  SKU总数量
                </td>
                <td
                  style="
                    width: 228px;
                    border: 4px solid #7b7b7b;
                    border-bottom: none;
                  "
                >
                  总箱数
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style="height: 135px; font-size: 40px; color: #010101">
                <td
                  style="
                    border: 4px solid #7b7b7b;
                    border-right: none;
                    font-weight: bold;
                    font-size: 60px;
                  "
                >
                  {{ item.skuNum }}
                </td>
                <td
                  style="
                    border: 4px solid #7b7b7b;
                    font-weight: bold;
                    font-size: 60px;
                    border-right: none;
                  "
                >
                  {{ item.skuSum }}
                </td>
                <td
                  style="
                    border: 4px solid #7b7b7b;
                    font-weight: bold;
                    font-size: 60px;
                  "
                >
                  {{ item.skuPackingNumber }}
                </td>
              </tr>
            </tbody>
          </table>

          <div
            style="
              width: 1145px;
              height: 326px;
              border: 4px solid #7b7b7b;
              margin: 0 18px;
            "
          >
            <img
              :id="'barcode_' + i"
              style="
                width: 1125px;
                height: 254px;
                margin-top: 9px;
                margin-left: 6px;
              "
            />
            <div
              style="
                height: 55px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 45px;
                color: #000000;
                font-weight: 500;
              "
            >
              {{ item.code }}
            </div>
          </div>
          <div
            style="
              width: 1145px;
              height: 171px;
              border: 4px solid #7b7b7b;
              margin: 0 15px;
              margin-top: 39px;
              display: flex;
            "
          >
            <div
              style="
                width: 153px;
                height: 100%;
                border-right: 4px solid #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 45px;
                color: #000000;
              "
            >
              <div style="width:92px;height;171px">入库确认</div>
            </div>
            <div
              style="
                width: 493px;
                border-right: 4px solid #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            ></div>
            <div
              style="
                width: 71px;
                border-right: 4px solid #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  width: 43px;
                  height: 150px;
                  font-size: 45px;
                  color: #000000;
                "
              >
                备注
              </div>
            </div>
          </div>
          <div
            style="
              width: 1145px;
              height: 171px;
              border: 4px solid #7b7b7b;
              margin: 0 20px;
              margin-top: 39px;
              display: flex;
            "
          >
            <div
              style="
                width: 153px;
                height: 100%;
                border-right: 4px solid #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 45px;
                color: #000000;
              "
            >
              <div style="width:92px;height;171px">出库确认</div>
            </div>
            <div
              style="
                width: 493px;
                border-right: 4px solid #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            ></div>
            <div
              style="
                width: 71px;
                border-right: 4px solid #7b7b7b;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  width: 43px;
                  height: 150px;
                  font-size: 45px;
                  color: #000000;
                "
              >
                备注
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { box_tags } from "@/apis/common";
import VueQr from "vue-qr";
import JsBarcode from "jsbarcode";
export default {
  components: {
    VueQr,
  },

  data() {
    return {
      loading: false,
      visible: false,
      htmlTitle: "外箱标",
      tagArry: [],
      spinning: false,
    };
  },

  mounted() {
    this.$bus.$off("CartonLabelModal");
    this.$bus.$on("CartonLabelModal", async (record) => {
      let { code, responseBody } = await box_tags(record.key);
      if (code === "200") {
        this.visible = true;

        this.tagArry = responseBody;
        this.htmlTitle = record.applyCode + "外箱标";
        this.$nextTick(() => {
          this.getJsBarcode();
        });
      }
    });
  },
  methods: {
    getJsBarcode() {
      this.tagArry.forEach((item, index) => {
        JsBarcode("#barcode_" + index, item.code, {
          format: "CODE128", //选择要使用的条形码类型
          width: 3, //线宽
          height: 80, //条码高度
          displayValue: false, //是否显示文字信息
        });
      });
    },
    getPdfs() {
      this.loading = true;
      this.getPdf();
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 0px !important;
  display: flex;
}
</style>
